<template>
  <div class="order-con table-gl-w">
    <div class="search-w">
      <FilterTable :filterItem="filterItem" :isReset="true" @search="searchByVal" />
    </div>
    <div class="table-gl-con">
      <TableWrap style="flex: 1" @refresh="getList">
        <template #headerLeft>
          <a-button type="primary" @click="show('add')">添加</a-button>
          <a-button class="ml10 gray-outline" @click="del('mul')">删除</a-button>
        </template>
        <template #tableBody>
          <a-table size="mini" class="table-singe-line show-border-table" :data="dataList" v-model:selected-keys="ids" row-key="id" :loading="loading" :row-selection="rowSelection" :pagination="false" :scroll="{ y: '100%' }">
            <template #columns>
              <a-table-column title="编码" #cell="{ record, rowIndex }" :width="120">
                {{ record.code }}
              </a-table-column>
              <a-table-column title="模板名称" #cell="{ record, rowIndex }" :width="120">
                {{ record.name }}
              </a-table-column>
              <a-table-column title="绑定规格" #cell="{ record, rowIndex }" :width="120">
                {{ getValue(record) }}
              </a-table-column>
              <a-table-column title="创建人" #cell="{ record, rowIndex }" :width="120">
                {{ record.createUname }}
              </a-table-column>

              <a-table-column title="创建时间" #cell="{ record, rowIndex }" :width="120">
                {{ $setTime(record.gmtCreate) }}
              </a-table-column>
              <a-table-column title="操作" #cell="{ record, rowIndex }" :width="40">
                <a-button type="text" @click="show('edit', record)">编辑</a-button>
                <a-button type="text" style="color: red; margin-left: 10px" @click="del('single', record)">删除</a-button>
              </a-table-column>
            </template>
          </a-table>
        </template>
      </TableWrap>
      <div class="pagination-footer">
        <a-pagination size="mini" :page-size-options="[20, 50, 100, 200, 500]" show-total show-page-size :total="pageNation.total" :default-page-size="pageNation.pageSize" :current="pageNation.pageNum" style="float: right" @page-size-change="sizeChange" @change="changePage" />
      </div>
    </div>
  </div>
  <TemDetail ref="detail" :type="type" :info="info" @save="sizeChange(pageNation.pageSize)" />
</template>

<script lang="ts">
  import { defineComponent, ref, reactive, toRefs } from 'vue'
  import { fbaOrderReplace } from '@/api/order'
  import { pageProductSpecTemplate, removeProductSpecTemplate } from '@/api/product'
  import { Modal, Message } from '@arco-design/web-vue'
  import FilterTable from '@/components/TableFilter.vue'
  import TableWrap from '@/components/TableWrap.vue'
  import textLimit from '@/components/textLimit.vue'
  import TemDetail from './specificationTemDetail.vue'

  import _ from 'lodash-es'
  export default defineComponent({
    components: {
      FilterTable,
      TableWrap,
      textLimit,
      TemDetail,
    },
    setup() {
      const detail = ref()
      const data: any = reactive({
        filterItem: [
          {
            type: 'input_keyword',
            key: 'nameList',
            keyItems: [{ label: '模板名称', value: 'nameList' }],
            keyWidth: '120',
            value: ref(),
            placeholder: '请输入',
            label: '模板名称',
            width: 160,
            isMultiple: true,
          },
        ],
        dataList: [],
        pageNation: { total: 0, pageSize: 20, pageNum: 1 },
        loading: false,
        isCollapse: false,
        info: {},
        type: '',
        searchValue: {},
        rowSelection: {
          type: 'checkbox',
          showCheckedAll: true,
        },
        ids: [],
      })

      const searchByVal = (info: any) => {
        let obj = _.cloneDeep(info)
        data.searchValue = {}
        for (const key in obj) {
          if (key == 'date' && obj[key]) {
            data.searchValue.startDate = `${obj[key][0]} 00:00:00`
            data.searchValue.endDate = `${obj[key][1]} 23:59:59`
          } else {
            data.searchValue[key] = obj[key]
          }
        }
        data.pageNation.pageNum = 1
        getList()
      }
      const changePage = (val: number) => {
        data.pageNation.pageNum = val
        getList()
      }

      const sizeChange = (val: number) => {
        data.pageNation.pageNum = 1
        data.pageNation.pageSize = val
        getList()
      }

      const getList = async () => {
        let params = {
          ...data.searchValue,
          pageNum: data.pageNation.pageNum,
          pageSize: data.pageNation.pageSize,
        }
        data.loading = true
        const res = await pageProductSpecTemplate(params)
        data.dataList = res?.data?.records
        data.pageNation.total = res?.data?.total
        data.loading = false
      }

      const show = (type: string, info?: any) => {
        data.type = type
        data.info = info

        detail.value.visible = true
      }

      const getValue = (item: any) => {
        let arr = item?.specList || []
        return arr.map((e: any) => e.nameCn).join(';')
      }

      const del = (type: string, item?: any) => {
        if (type == 'mul' && !data.ids[0]) {
          return Message.error('请选择需要删除的数据')
        }
        Modal.confirm({
          title: '提示',
          content: `是否删除？`,
          cancelText: '取消',
          okText: '确认',
          titleAlign: 'start',
          onOk: async () => {
            let res: any = await removeProductSpecTemplate(type == 'mul' ? data.ids : [item.id])
            if (res.code == 'SUCCESS') {
              Message.success('删除成功')
              getList()
            }
          },
        })
      }

      getList()
      return {
        ...(toRefs(data) as any),
        searchByVal,
        changePage,
        sizeChange,
        detail,
        show,
        del,
        getList,
        getValue,
      }
    },
  })
</script>

<style lang="less" scoped>
  .order-con {
    height: calc(100vh - @menuAndTabHeight);
    width: 100%;

    .item-detail {
      min-height: 56px;
      width: 100%;
      border-bottom: 1px solid #e5e6eb;
    }
  }
</style>
